import { defineComponent, CSSProperties, PropType, watchEffect, ref } from 'vue'
import 'quill/dist/quill.snow.css'
export default defineComponent({
  name: 'QuillViewer',
  props: {
    modelValue: {
      type: String as PropType<string>,
      default: ''
    }
  },
  setup(props) {
    const styles: CSSProperties = {
      border: 'none'
    }
    const html = ref('')
    watchEffect(() => {
      html.value = props.modelValue
    })
    return () =>
      <div style={styles} class="ql-container ql-snow">
        <div class="ql-editor">
          <div v-html={html.value}>
          </div>
        </div>
      </div>
  }
})
